<!--
 * @Author: wuheng wuheng@szhbzc.com
 * @Date: 2024-12-11 14:32:19
 * @LastEditors: wuheng wuheng@szhbzc.com
 * @LastEditTime: 2025-03-08 16:14:22
 * @FilePath: \hbzc-groupmeal-center-web\src\centerViews\dishmana\dishestype\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="dishestype">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane v-for="(item, key) in activeList" :key="key" :label="item.dishAttributeName"
        :name="item.dishAttributeType">
      </el-tab-pane>
    </el-tabs>
    <pb-card padding="0px " class="flex-1">
      <ContentOperation>
        <pb-button size="small" plain @click="PopDetailFn('1')" v-hasPerm="'center:dishType:add'">+新增</pb-button>
      </ContentOperation>
      <pb-card>
        <pb-table :tableData="tableData" :column="column" :bottomElement="['pb-page']">
          <template #enable="{ row }">
            <div v-hasPerm="'center:dishType:switch'">
              <el-switch v-model="row.selected" @change="switchChange(row)" />
            </div>
          </template>
          <template #operation="{ row }">
            <div>
              <pb-button size="small" text @click="PopDetailFn('2', row)"
                v-hasPerm="'center:dishType:add:edit'">编辑</pb-button>
            </div>
          </template>
        </pb-table>
        <pb-pagination v-model:currentPage="pages.currentPage" v-model:pageSize="pages.pageSize" @onChange="getDatalist"
          :total="pages.total"></pb-pagination>
      </pb-card>
    </pb-card>
    <pb-popup v-model="isVisible" :title="dialogtitle == 'add' ? '新增属性名称' : '编辑属性名称'" @cancelFn="CancelFn"
      @confirmFn="confirmFn" :Width="372">
      <div class="Modals">
        <el-form :model="PopupFrom" label-width="auto" :inline="true" class="Forms" :rules="UpdataFormRules"
          ref="ruleFormRef">
          <el-form-item label="属性名称" prop="dishAttributeValue">
            <pb-input v-model="PopupFrom.dishAttributeValue" placeholder="" :width="132" maxlength="8" />
          </el-form-item>
        </el-form>
        <div class="flex">
          <div></div>
        </div>
        <div class="Line"></div>
      </div>
    </pb-popup>
  </div>
</template>

<script lang="ts" setup>
import { createMessage } from "@/Public-UIlibrary/pb-message/method";
import { GetDishTypeAttributeApi, GetDishTypeValueListApi, editDishTypeAttributeApi, AddDishTypeAttributeApi, enableDishTypeAttributeApi } from '@/api/Dashmana'
const pages = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})
import type { FormInstance } from 'element-plus'
const ruleFormRef = ref<FormInstance>()
const activeList = ref([] as any)
const activeName = ref('first')

const clearObjKey = (clearForm: any) => {
  Object.keys(clearForm).forEach((key: any) => {
    clearForm[key] = '';
  });
}
const PopupFrom = reactive({
  dishAttributeValue: '',
  dishAttributeId: ''
})
const validateName = (rule, value, callback) => {
  if (!value) return callback(new Error("请输入属性"));
  const regex = /^[A-Za-z0-9\u4e00-\u9fa5]+$/;
  if (!regex.test(value)) {
    return callback(new Error('只允许输入中文、英文、数字'));
  }
  else {
    callback();
  }
}
// const AddUpdataFormRules = ref({
//   dishName: [
//     { required: true, validator: validateName, trigger: 'blur' }
//   ],
const UpdataFormRules = reactive({
  dishAttributeValue: [
    { required: true, validator: validateName, trigger: 'blur' },
  ]
})
const handleClick = (tab: any, event: any) => {
  // 表单第一项文字动态变化
  column.value[0].name = tab.props.label
  pages.currentPage = 1
  pages.pageSize = 10
  activeName.value = tab.props.name
  getDatalist()
}
const tableData = ref([])
const column = ref([
  {
    key: 'dishAttributeValue',
    name: '口味名称',
  },
  {
    slot: 'enable',
    name: '启用状态',
    align: 'right',
    fixed: 'right',
    width: 12
  },
  {
    slot: 'operation',
    name: '操作',
    width: 8,
    align: 'right',
    fixed: 'right'
  }] as any)

const PopDetailFn = (Tnums: string, row = {} as any) => {
  if (Tnums == '1') {
    clearObjKey(PopupFrom)
    dialogtitle.value = 'add'
  } else {
    Object.assign(PopupFrom, row)
    dialogtitle.value = 'update'
  }
  isVisible.value = true
}
const isVisible = ref(false)
const dialogtitle = ref('')
const confirmFn = async () => {
  if (ruleFormRef.value) {
    await ruleFormRef.value.validate((valid) => {
      if (valid) {
        // 提交表单
        if (dialogtitle.value == 'update') {
          editDishTypeAttributeApi({
            "dishAttributeValueId": PopupFrom.dishAttributeValueId,
            "dishAttributeValue": PopupFrom.dishAttributeValue
          }).then((res: any) => {
            if (res.code == 2000) {
              createMessage({
                message: '编辑成功'
              })
              getDatalist()
              isVisible.value = false
            }
          })
        } else {
          AddDishTypeAttributeApi({
            "dishAttributeType": activeName.value,
            "dishAttributeValue": PopupFrom.dishAttributeValue
          }).then((res: any) => {
            if (res.code == 2000) {
              createMessage({
                message: '添加成功'
              })
              getDatalist()
              isVisible.value = false
            }
          })
        }
      } else {
        // 处理验证错误
      }
    });
  }
}
const CancelFn = () => {
  if (ruleFormRef.value) {
    ruleFormRef.value.resetFields(); // 重置表单并清除校验规则
  }
}
const searchFn = () => {

}
const resetFn = () => {

}
const GetDishList = () => {

}
const switchChange = (row: any) => {
  enableDishTypeAttributeApi({ dishAttributeValueId: row.dishAttributeValueId }).then(res => {
    if (res.code == 2000) {
      // createMessage({
      //   message: '切换成功'
      // })
    } else {
      row.selected = !row.selected
    }
  })
}
const getDatalist = () => {
  GetDishTypeValueListApi({
    "currentPage": pages.currentPage,
    "pageSize": pages.pageSize,
    "sortingFields": [
      {
        "field": "",
        "order": ""
      }
    ],
    "dishAttributeType": activeName.value
  }).then(res => {
    tableData.value = res.data.records
    tableData.value.forEach((el: any) => {
      if (el.enableState == 1) {
        el.selected = true
      } else {
        el.selected = false
      }
    })
    pages.total = res.data.total
  })
}
onMounted(() => {
  GetDishTypeAttributeApi({}).then(res => {
    activeList.value = res.data
    activeName.value = res.data[0].dishAttributeType
    column.value[0].name = res.data[0].dishAttributeName
    getDatalist()
  })
})
</script>
<style lang="scss">
.dishestype {
  .el-form-item {
    width: 100%;
    margin-bottom: 0;
    margin-top: 24px;
  }

  .el-form-item__content {
    display: block;
  }

  .el-form-item--default .el-form-item__label {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.65);
    font-style: normal;
    text-transform: none;
  }
}
</style>
<style lang="scss" scoped>
.dishestype {}
</style>